<template>
  <div class="login-page clearfix">
    <login-header></login-header>
    <div class="login-form">
      <p class="type-title">
        <span>基本信息</span>
        <span>"<em>*</em>"为必填项</span>
      </p>
      <div class="form-list clearfix">
        <label><em>*</em>类型</label>
        <div class="form-control">
          <el-select v-model="valueType" popper-class="self-select" placeholder="请选择">
            <el-option v-for="item in optionsType" :value="item.key" :key="item.key" :label="item.value">
            </el-option>
          </el-select>
          <span class="error-tips" v-show="errMass.showErrType">请选择类型</span>
          <p class="form-tips" v-show="valueType == '0'">个人身份申请，适合垂直领域的专家、意见领袖、评论家、自媒体人士及站长申请。</p>
          <p class="form-tips" v-show="valueType== '1'">您已经选择了类型"媒体"，有媒体资质的网站、报刊杂志、电台、电视台等申请。</p>
          <p class="form-tips" v-show="valueType== '2'">公司、分支机构等类型的组织。</p>
          <p class="form-tips" v-show="valueType== '3'">国内外国国家政府机构、事业单位、参公管理的社团组织等申请。</p>
          <p class="form-tips" v-show="valueType== '4'">各类公共场馆、公益机构、学校、社团、民间组织等机构团体申请。</p>
        </div>
      </div>

      <div class="form-list clearfix">
        <label><em>*</em>领域</label>
        <div class="form-control">
          <el-select v-model="value" popper-class="self-select" placeholder="请选择">

            <el-option v-for="item in options" :value="item.key" :key="item.key" :label="item.value">
            </el-option>
          </el-select>
          <p class="form-tips">领域提交后不可修改，明确擅长创作领域，发文和所选领域一致有助于提高作者等级。</p>
        </div>
      </div>

      <div class="form-list clearfix">
        <label><em>*</em>大V昵称</label>
        <div class="form-control">
          <div class="input-box">
            <!--<span class="num-length">12/20</span>-->
            <input type="text" v-model.trim="nicName" ref="vNicname" class="self-input" placeholder="请输入内容"
                   maxlength="10"
                   @blur="changeNicName"/>
          </div>
          <span class="error-tips" v-show="errMass.showErrNic">请输入不小于2个字的昵称</span>
          <p class="form-tips">2-10个字，使用与领域相关的名字，能有效提升读者点击量。</p>
        </div>
      </div>

      <div class="form-list clearfix">
        <label><em>*</em>大V签名</label>
        <div class="form-control">
          <div class="input-box">
            <!--	<span class="num-length">12/20</span>-->
            <input type="text" v-model.trim="vAutograph" ref="vAuto" class="self-input large-input" @blur="changeV"
                   placeholder="请输入内容"
                   maxlength="20"/>
          </div>
          <span class="error-tips" v-show="errMass.showErrAuto">请输入不小于10个字的签名</span>
          <p class="form-tips">10-20个字，将显示在个人主页，签名准确描述文章风格，有助于加强读者对您的了解。示例：专注科幻电影解说。</p>
        </div>
      </div>

      <div class="form-list clearfix">
        <label>大V介绍</label>
        <div class="form-control">
          <div class="input-box textarea-box">
            <span class="num-length textfixed">{{textLen}}/300</span>
            <textarea @input="textChange($event)" v-model="textareaContent" maxlength="300"></textarea>
            <!--<input type="text" class="self-input large-input" placeholder="请输入内容"/>-->
          </div>
          <p class="form-tips">可输入10-300个字</p>
        </div>
      </div>

      <div class="form-list clearfix">
        <label><em>*</em>设置头像</label>
        <div class="form-control user-header">
          <el-upload
            class="photo-box"
            action=""
            :show-file-list="false"
            :on-change="uploadOnChange"
            :http-request='submitUpload'
            :before-upload="beforeAvatarUpload">
            <img class="photo-img" v-if="imgsHead" :src="imgsHead">
            <div class="upload-box" :class="{uploadShow:imageUserUrl}">
              <img class="photo-demo" src="../../assets/images/photo.png"/>
              <p>上传头像</p>
            </div>

          </el-upload>
          <p class="form-tips">上传跟领域相关的头像，有助于建立您的百家号牌，要求清晰、健康、代表品牌形象；请勿使用二维码、政治敏感及色情图片；</p>
          <p class="form-tips">图片格式支持bmp、jpeg、jpg、png;200X200像素，不大于5MB。</p>
        </div>
      </div>

      <div class="form-list clearfix">
        <label><em>*</em>所在地</label>
        <div class="form-control">
          <div class="input-box">
            <el-select v-model="selectedProvince" @change="changeProvince" popper-class="self-select" placeholder="请选择">
              <el-option v-for="item in provinces" :value="item.provId" :key="item.provId" :label="item.provName">
              </el-option>
            </el-select>
            <el-select v-model="selectedCity" popper-class="self-select" placeholder="请选择">

              <el-option v-for="item in cities" :value="item.cityName" :key="item.cityId" :label="item.cityName">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>

      <div class="form-list clearfix">
        <label>邀请码</label>
        <div class="form-control">
          <div class="input-box">
            <input type="text" class="self-input" v-model.trim="InvCode" placeholder="请输入内容"/>
          </div>
          <p class="form-tips">没有可不填写</p>
        </div>
      </div>


      <p class="type-title">
        <span>运营者信息</span>
        <span>"<em>*</em>"为必填项</span>
      </p>
      <div class="form-list clearfix">
        <label><em>*</em>运营者姓名</label>
        <div class="form-control">
          <div class="input-box">
            <input type="text" ref="opName" maxlength="12" class="self-input" v-model.trim="OperatorName"
                   placeholder="请输入内容"
                   @blur="changeIDName"/>
          </div>
          <span class="error-tips" v-show="errMass.showErrName">请输入姓名</span>
          <p class="form-tips">请与身份证姓名保持一致，如果名字包含隔号"."，请勿忽略。</p>
        </div>
      </div>

      <div class="form-list clearfix">
        <label><em>*</em>运营者身份证</label>
        <div class="form-control">
          <div class="input-box">
            <input type="text" v-model="idCard" ref="opId" class="self-input" placeholder="请输入内容" @blur="changeID"/>
          </div>
          <span class="error-tips" v-show="errMass.showErrID">请输入正确的身份证号</span>
          <p class="form-tips">请与身份证号保持一致</p>
        </div>
      </div>

      <div class="form-list clearfix">
        <label><em>*</em>手持身份证</label>
        <div class="form-control user-header">
          <el-upload
            class="photo-box  idcard-box"
            action=""
            :show-file-list="false"
            :on-change="uploadOnChange"
            :http-request='submitUploadID'
            :before-upload="beforeAvatarUpload">
            <img v-if="imgsID" :src="imgsID" class="photo-img">
            <div class="upload-box" :class="{uploadShow:imageUrl}">
              <img class="photo-demo" src="../../assets/images/photo.png"/>
              <p>上传身份证</p>
            </div>

          </el-upload>
          <span class="error-tips" v-show="errMass.showErrUser">请上传照片</span>
          <p class="form-tips">请拍摄免冠面部照，身份证单手举在面部右侧，请勿用前置摄像头，高度过肩，勿遮挡面部和身份证信息。</p>
          <p class="form-tips">确保包括身份证号在内的图片信息清晰可见，大小不超过5MB。</p>
        </div>
      </div>

      <div class="form-list clearfix">
        <label>邮箱地址</label>
        <div class="form-control">
          <div class="input-box">
            <input type="text" v-model.trim="email" class="self-input" placeholder="请输入内容" @blur="checkEmail"/>
          </div>
          <span class="error-tips" v-show="errMass.showErrEmail">请添写正确的邮箱地址</span>
          <p class="form-tips">没有可不填写</p>
        </div>
      </div>

      <div class="form-list clearfix">
        <label><em>*</em>验证码</label>
        <div class="form-control">
          <div class="input-box">
            <input type="text" class="self-input" ref="chCode" v-model.trim="cheCode" placeholder="请输入内容"
                   @blur="changeCode"/>
            <span class="check-code">
              <a @click="checkGetImg"><img :src="checkImg"></a>
            </span>
            <a><span class="check-tips" @click="checkGetImg">看不清楚？换一张</span></a>
            <p class="error-tips" v-show="errMass.showErrCode">请输入正确验证码</p>
          </div>
        </div>
      </div>


      <div class="handle-btn">
        <div class="handle-btn-box">
          <button class="save-btn-two" @click="submitForm">提交</button>
          <span>您最多可以提交<em>5</em>次审核，当前为第<em>{{submitCount}}</em>次</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import LoginHeader from '@/components/LoginHeader'
  import util from '../../lib/util'
  import * as codes from '../../lib/returnCode'
  import {mapState, mapActions} from 'vuex';

  export default {
    name: 'LoginForm',
    components: {
      LoginHeader
    },
    data() {
      return {
        valueType: '0',
        optionsType: [
          {value: '个人', key: '0'},
          {value: '媒体', key: '1'},
          {value: '企业', key: '2'},
          {value: '政府', key: '3'},
          {value: '其他组织', key: '4'}
        ],
        vAutograph: '',
        nicName: '',
        textareaContent: '',
        textLen: '0',
        imageUrl: '',
        imageUserUrl: '',
        selectedProvince: '',
        selectedCity: '',
        provinces: [],
        cities: [],
        idCard: '',
        email: '',
        checkImg: util.vars.ajaxUrl + "/captcha/get",
        OperatorName: '',
        OperatorId: '',
        errMass: {
          showErrName: false,
          showErrID: false,
          showErrCode: false,
          showErrUser: false,
          showErrType: false,
          showErrNic: false,
          showErrAuto: false,
          showErrEmail: false
        },
        options: [
          {value: '互联网', key: '0'},
        ],
        value: '0',
        submitCount: 0,
        InvCode: '',
        cheCode: '',
        imgsID: '',
        imgsHead: ''
      }
    },
    created() {

      this.ajaxProvinces();

    },
    methods: {
      ...mapActions([
        'loginUser'
      ]),
      checkEmail: function () {


        if (this.email) {
          var regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
          if (regex.test(this.email)) {
            this.errMass.showErrEmail = false;
          } else {
            this.errMass.showErrEmail = true;
          }
        }

      },
      textChange: function (e) {


        let len = e.target.value.trim().length || 0;

        this.textLen = len
      },
      changeNicName: function () {

        if (this.nicName && this.nicName.length >= 2) {
          this.errMass.showErrNic = false;
        } else {
          this.errMass.showErrNic = true;
        }
      },
      changeV: function () {


        if (this.vAutograph && this.vAutograph.length >= 10) {
          this.errMass.showErrAuto = false;
        } else {
          this.errMass.showErrAuto = true;
        }

      },
      // 验证验证码
      changeCode: function () {

        if (this.cheCode) {
          this.errMass.showErrCode = false;
        } else {
          this.errMass.showErrCode = true;
          return
        }


      },
      // 验证营销名称
      changeIDName: function () {

        if (this.OperatorName) {
          this.errMass.showErrName = false;
        } else {
          this.errMass.showErrName = true;
        }

      },
      // 验证身份证号码
      changeID: function () {

        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(this.idCard) === false) {

          this.errMass.showErrID = true;
        } else {

          this.errMass.showErrID = false;
        }
      },
      // 判断上传图片类型和大小
      beforeAvatarUpload: function (file) {

        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
        const isLt2M = file.size / 1024 / 1024 < 5;

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        if (!isJPG) {
          this.$message.error('上传格式不正确');
        }

        return isLt2M && isJPG;

      },
      uploadOnChange: function (file, fileList) {

      },
      // 设置用户头像
      submitUpload: function (content) {


        let fd = new FormData();

        fd.append('fileData', content.file);

        util.ajax.post('upload/image?type=1', fd, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then((res) => {

          this.imgsHead = res.data.url;

          this.imageUserUrl = res.data.key;

          //this.imageUserUrl = URL.createObjectURL(res.data.uri);

        });
      },
      // 上传运营者身份证照片
      submitUploadID: function (content) {


        let fd = new FormData();

        fd.append('fileData', content.file);

        util.ajax.post('upload/image?type=4', fd, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then((res) => {


          this.imgsID = res.data.url;

          this.imageUrl = res.data.key;

          //this.imageUrl = URL.createObjectURL(res.data.uri);

        });
      },
      //获取省份
      ajaxProvinces: function () {

        util.ajax.get('provinces').then((res) => {

          if (res.data) {
            this.selectedProvince = res.data[0].provId;

            this.provinces = res.data;

            this.ajaxCities(res.data[0].provId);
          }

        })
      },
      // 获取城市
      ajaxCities: function (id) {

        util.ajax.get(`citys?provId=${id}`).then((res) => {

          this.selectedCity = res.data[1].cityName;
          this.cities = res.data;

        })
      },
      changeProvince: function (id) {
        this.selectedCity = '';

        this.ajaxCities(id);

      },
      checkGetImg: function () {


        this.checkImg = util.vars.ajaxUrl + "captcha/get?time=" + (new Date());

      },
      //提交信息
      submitForm: function () {


        if (this.submitCount >= 5) {

          this.$message.error('提交不可以超过五次');


          return;
        }


        // 判断昵称
        if (this.nicName && this.nicName.length >= 2) {
          this.errMass.showErrNic = false;
        } else {
          this.errMass.showErrNic = true;
          this.$refs.vNicname.focus();
          return
        }

        // 判断大V签名

        if (this.vAutograph && this.vAutograph.length > 10) {
          this.errMass.showErrAuto = false;
        } else {
          this.errMass.showErrAuto = true;
          this.$refs.vAuto.focus();
          return
        }


        // 判断大V签名

        if (this.vAutograph && this.vAutograph.length > 10) {
          this.errMass.showErrAuto = false;
        } else {
          this.errMass.showErrAuto = true;
          this.$refs.vAuto.focus();
          return
        }

        // 判断设置头像
        if (!this.imageUserUrl) {
          this.$message.error('请设置头像');

          return;
        }
        if (!this.imageUrl) {

          this.$message.error('请上传身份证照片');
          return;
        }

        //判断营销者名称

        if (this.OperatorName) {
          this.errMass.showErrName = false;
        } else {
          this.errMass.showErrName = true;
          this.$refs.opName.focus();
          return
        }

        //判断营销者ID

        let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(this.idCard) === false) {

          this.errMass.showErrID = true;
          this.$refs.opId.focus();
          return
        } else {

          this.errMass.showErrID = false;

        }


        //判断身份证图片

        if (!this.imageUrl) {
          this.$message.error('请上传身份证图片');

          return
        }

        //判断验证码

        if (this.cheCode) {
          this.errMass.showErrCode = false;
        } else {
          this.errMass.showErrCode = true;
          this.$refs.chCode.focus();
          return
        }


        let selProvince = this.provinces.filter((item) => {

          if (item.provId == this.selectedProvince) {
            return item;
          }

        });


        let params = {
          "captchaCode": this.cheCode,
          "avatar": this.imageUserUrl,
          "city": this.selectedCity,
          "field": this.value,//领域
          "nickname": this.nicName,
          "operatorEmail": this.email,//运营者email,
          "operatorId": this.idCard, //运营者身份证号,
          "operatorIdPicture": this.imageUrl,
          "operatorName": this.OperatorName, //运营姓名
          "province": selProvince[0].provName,
          "signature": this.vAutograph,
          "user_character": 1,
          "user_desc": this.textareaContent,//用户介绍
          "user_type": this.valueType, //角色类型
          "inviteCode": this.InvCode //邀请码
        };


        util.ajax.post('user/setting', {...params}).then((res) => {

          if (res.code == codes.SUCCESS_CODE) {
            this.submitCount = this.submitCount + 1;

            /* "account": "13589899999", "expireDays": 0, "password": "123456"*/
            /*let param = {
              account: localStorage.getItem('regPhone'),
              password: localStorage.getItem('regPassword'),
              expireDays: 0
            };

            this.loginUser({...param}).then((res) => {

              if (res.code == codes.SUCCESS_CODE) {
              }

            });*/


            this.$router.push({path: '/Article'})

          } else {

            this.$message.error(res.msg);

          }
        })


        /*   // 验证验证码
           util.ajax.post('captcha/valid', {captchaCode: this.cheCode}).then((res) => {




             if (res.code == codes.SUCCESS_CODE) {




             } else {



               this.checkGetImg();

               this.errMass.showErrCode = true;

             }

           })*/

      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/style.scss";

  .login-page {
    background: $borderbottomColor;
    .login-form {
      margin: 50px auto 50px;
      width: 900px;
      .type-title {
        margin-top: 50px;
        margin-bottom: 30px;
        border-bottom: 1px solid $listborderColor;
        span {
          padding-left: 20px;
          display: inline-block;
          width: 110px;
          font-size: $fs16;
          line-height: 30px;
          color: $listTitleColor;
          &:nth-child(2) {
            padding-left: 0px;
            font-size: $fs12;
            line-height: 30px;
            color: $vfConcentColor;
            em {
              color: $borderColor;
            }
          }
        }
      }
      .form-list {
        margin-bottom: 10px;
        label {
          position: relative;
          padding-left: 20px;
          float: left;
          width: 110px;
          font-size: $fs16;
          line-height: 40px;
          color: $listTitleColor;
          em {
            position: absolute;
            top: 3px;
            left: 8px;
            color: $borderColor;
          }
        }
        .form-control {
          float: left;
          .input-box {
            display: inline-block;
            position: relative;
            .self-input {
              padding-right: 40px !important;
              width: 210px;
              font-size: $fs14;
            }
            .large-input {
              width: 400px;
            }
            .num-length {
              position: absolute;
              top: 1px;
              right: 20px;
              line-height: 40px;
              color: $vfConcentColor;
            }
            .textfixed {
              top: auto;
              bottom: 0px;
            }
            textarea {
              width: 100%;
              height: 100%;
              line-height: 20px;
              font-size: $fs14;
              color: $listTitleColor;
              border: none;
            }
          }
          .textarea-box {
            padding: 10px 20px 30px !important;
            width: 460px;
            height: 180px;
            background: $colorWhite;
            border: 1px solid $listTitleColor;
            border-radius: 20px;
          }
          .form-tips {
            padding-left: 20px;
            font-size: $fs12;
            line-height: 30px;
            height: 30px;
            color: $vfConcentColor;
          }
        }
        .user-header {
          width: 500px;
          .photo-box {
            position: relative;
            float: left;
            margin-right: 10px;
            overflow: hidden;
            width: 80px;
            height: 80px;
            border: 1px solid $listTitleColor;
            border-radius: 20px;
            background: #F8F8F8;
            line-height: 20px;
            font-size: $fs12;
            color: $vfConcentColor;
            text-align: center;
            .photo-img {
              width: 100%;
              height: 100%;
            }
            .upload-box {
              position: absolute;
              top: 0px;
              left: 0px;
              bottom: 0px;
              right: 0px;
              z-index: 10;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              background: $colorWhite;
              opacity: .8;
              .photo-demo {
                margin-bottom: 5px;
                width: 20px;
                height: 20px;
              }
              p {
                font-size: $fs12;
                color: $vfConcentColor;;
                line-height: 20px;
              }
            }
            .uploadShow {
              display: none;
            }
            &:hover {
              .uploadShow {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              }
            }
          }

          .idcard-box {
            width: 200px;
            height: 110px;
          }
          .form-tips {
            &:nth-child(2) {
              padding-top: 10px;
            }
            line-height: 20px;
            height: auto;
          }
        }
      }
      .handle-btn {
        margin-top: 30px;
        padding: 30px 0px 0px 130px;
        border-top: 1px solid $listborderColor;
        .handle-btn-box {
          padding-bottom: 30px;
          button {
            margin-right: 33px;
            width: 270px;
          }
          span {
            font-size: $fs12;
            line-height: 30px;
            color: $vfConcentColor;
            em {
              color: $borderColor;
            }
          }
        }

      }
    }
    .check-code {
      display: inline-block;
      margin: 0px 10px 0px 20px;
      width: 100px;
      height: 40px;
      background: $colorWhite;
      border: 1px solid $colorWhite;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .check-tips {
      font-size: $fs14;
      line-height: 40px;
      color: $listTitleColor;
      cursor: pointer;
    }
    .error-tips {
      padding-left: 20px;
      font-size: $fs14;
      line-height: 40px;
      color: $borderColor;
    }
  }
</style>
